<template>
    <div>
        <div class="container">
            <table class="table table-striped">

                <caption>学生管理系统v1.0-展示学生</caption>
                <!-- 这里需要加多一点层tbody，不然bootstrap样式不生效...
                    vue文件跟html不一样，html会自动加而vue不会
                 -->
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in arr" :key="index">
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                        <td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal"
                                data-whatever="@mdo" @click="del(item.name, index)">删除</button></td>
                    </tr>
                </tbody>
            </table>
            <hr>
            <hr>
            <hr>
            <form action="">
                <table class="table table-striped">
                    <caption>添加学生信息</caption>
                    <tbody>
                        <tr>
                            <td>项目</td>
                            <td>信息</td>
                        </tr>
                        <tr>
                            <td>姓名</td>
                            <td>
                                <input type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname"
                                    v-model="stuName">
                            </td>
                        </tr>
                        <tr>
                            <td>年龄</td>
                            <td>
                                <input type="text" class="form-control" id="stuage" placeholder="年龄" name="stuage"
                                    v-model="stuAge">
                            </td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td>
                                <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="男"
                                        v-model="stuGender"> 男</label>
                                <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="女"
                                        v-model="stuGender">
                                    女</label>
                                <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="保密"
                                        v-model="stuGender">
                                    保密</label>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="确定增加"
                        @click="add" /></div>
            </form>
        </div>
        <modal :show="isShowModal" :name="delName" @back="back" @del="realDel" />
    </div>
</template>

<script>
    import modal from './modal.vue'
    export default {
        name: '',
        components: {
            modal
        },
        props: {

        },
        data() {
            return {
                // 默认的学生数据
                arr: [{
                    name: '小明',
                    age: 12,
                    gender: "男"
                }, {
                    name: '小红',
                    age: 10,
                    gender: "女"
                }, {
                    name: '小刚',
                    age: 16,
                    gender: "保密"
                }],
                // 是否要展示对话框
                isShowModal: false,
                // 要添加的学生姓名
                stuName: "",
                // 要添加的学生年龄
                stuAge: "",
                // 要添加的学生性别
                stuGender: "男",
                // 要删除的学生姓名
                delName: "",
                // 要删除的学生下标
                delIndex: null
            };
        },
        methods: {
            add() {
                // 判空， 如果为空，就alert("提示为空")   return

                if (this.stuName.trim() == "" || this.stuAge.trim() == "") {
                    alert("姓名和年龄都不能为空");
                    return
                }
                // 添加
                this.arr.push({
                    name: this.stuName,
                    age: this.stuAge,
                    gender: this.stuGender
                })
            },
            del(name, i) {
                this.isShowModal = true;
                this.delName = name;
                this.delIndex = i;
            },
            realDel() {
                this.arr.splice(this.delIndex, 1);
                this.isShowModal = false;
            },
            back() {
                this.isShowModal = false
            }

        },
        computed: {

        },
    };
</script>

<style scoped lang="less">
    .row>div {
        border: 1px solid #000;
    }

    .modal {
        display: block;
        opacity: 1;
        top: 100px;
        overflow: visible;
    }
</style>